<template>
  <div class="profilemy">
    <div class="top">
      <span @click="goback">&lt;</span>
      编辑个人资料
    </div>
    <!-- 头像 -->
    <div class="toxiang">
      <!-- 图片 -->
      <img :src="'http://43.138.15.137:3000' + UserInfo.userAvatar" alt="" class="img" @click="openinput"
        ref="imageDOM">
      <p>点击更换头像</p>
      <input type="file" ref="inputDOM" @change="upload($event)" style="display: none;" accept="image/*">
    </div>
    <!-- 简介 -->
    <div class="box">
      <div class="test">
        <span>昵称</span>
        <input type="text" v-model="UserInfo.userNickname">
      </div>
      <div class="test">
        <span>签名</span>
        <input v-model="UserInfo.userDesc">
      </div>
      <div class="test">
        <span>性别</span>
        <select id="mySelect">
          <option value="男" :selected="UserInfo.userGender === '男'">男</option>
          <option value="女" :selected="UserInfo.userGender === '女'">女</option>
        </select>
      </div>
      <div class="test">
        <span>年龄</span>
        <input v-model="UserInfo.userAge">
      </div>
      <div class="test">
        <span>地区</span>
        <input v-model="UserInfo.userAddress">
      </div>
    </div>
    <Async_warn_part :flag="flag" @qx="qx" @qr="qr" />
  </div>
  <div class="imagecj" v-show="imagecj">
    <img src="" alt="" ref="cjimg">
    <div class="tzbox" @touchstart="start($event)" @touchmove="move($event)" ref="cjbox"></div>
    <button class="btn1" @click="qrcj">确认</button>
    <button class="btn2" @click="qxcj">取消</button>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'
const Async_warn_part = defineAsyncComponent(() => import('../components/common/warn-part.vue'))
import { getUserInfo, postUserInfo, uploadAvatar } from '../api/ProfileMy-page'
// 控制警告框和遮罩层显示隐藏
const flag = ref(false)
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 当前用户信息
const UserInfo = ref({})
//input的Dom元素
const inputDOM = ref(null)
//image的Dom元素
const imageDOM = ref(null)
// 头像的路径
const iamgeurl = ref('')
// 控制图片裁剪页面的显示隐藏
const imagecj = ref(false)
// 裁剪图片的DOM
const cjimg = ref(null)
// y滑动距离
const movetop = ref(0)
// x滑动距离
const moveleft = ref(0)
// 开始时的y轴
const topst = ref(0)
// 开始时的x轴
const leftst = ref(0)
const cjbox = ref(null)
// 初始化
init()
async function init() {
  // 用户信息
  let userinfo = await getUserInfo(myId)
  console.log(userinfo);
  UserInfo.value = userinfo.data.data
  localStorage.setItem('UserInfo', JSON.stringify(UserInfo.value))
}
// 返回
async function goback() {
  const selectElement = document.getElementById("mySelect");
  const selectedOption = selectElement.options[selectElement.selectedIndex];
  const selectedValue = selectedOption.value;
  console.log("选中的值是：" + selectedValue);
  // 原本的用户信息
  const userinfo = JSON.parse(localStorage.getItem('UserInfo'))
  console.log(userinfo.userGender);
  // 没有修改
  if (selectedValue === userinfo.userGender && UserInfo.value.userNickname === userinfo.userNickname && UserInfo.value.userDesc === userinfo.userDesc && UserInfo.value.userAge === userinfo.userAge && UserInfo.value.userAddress === userinfo.userAddress) {
    qx()
    // 修改了
  } else {
    flag.value = true
  }
}
// 警告的取消按钮
async function qx() {
  // 设置select标签的默认选择
  const selectElement = document.getElementById("mySelect");
  const selectedOption = selectElement.options[selectElement.selectedIndex];
  const selectedValue = selectedOption.value;
  console.log(selectElement.selectedIndex, '前');
  console.log(selectedValue, '前');
  const info = JSON.parse(localStorage.getItem('UserInfo'))
  UserInfo.value = info
  console.log(info.userGender);
  if (info.userGender === '男') {
    document.getElementById("mySelect").selectedIndex = 0
  } else {
    document.getElementById("mySelect").selectedIndex = 1
  }
  // 滑动关闭
  document.querySelector('.profilemy').style.transform = 'translateX(100%)';
  // 关闭模态框
  flag.value = false
}
// 警告的确认按钮
async function qr() {
  let res1 = await uploadAvatar(myId, {
    fieldName: iamgeurl.value
  })
  console.log(res1);
  if (res1.data.code === 200) {
    // 设置select标签的默认选择
    const selectElement = document.getElementById("mySelect");
    const selectedOption = selectElement.options[selectElement.selectedIndex];
    const selectedValue = selectedOption.value;
    let userinfo1 = await postUserInfo(myId, {
      'userAddress': UserInfo.value.userAddress,
      'userAge': UserInfo.value.userAge,
      'userDesc': UserInfo.value.userDesc,
      'userGender': selectedValue,
      'userNickname': UserInfo.value.userNickname,
      'userAvatar': `/assets/avatar/${myId}.png`
    })
    console.log(userinfo1);
    if (userinfo1.data.code === 200) {
      document.querySelector('.profilemy').style.transform = 'translateX(100%)';
      flag.value = false
      location.reload()
    }
  }
}

// 点击打开input上传头像
async function openinput() {
  inputDOM.value.click()
}
// 上传头像
function upload(e) {
  // console.log(e.target.files[0]);
  let reader = new FileReader()
  reader.readAsDataURL(e.target.files[0])
  reader.onload = () => {
    // console.log(reader.result, '头像base64格式');
    iamgeurl.value = reader.result
    imagecj.value = true
    cjimg.value.src = reader.result
  }
}

// 
function start(e) {
  topst.value = e.changedTouches[0].clientY
  leftst.value = e.changedTouches[0].clientX
  // console.log(leftst.value, '开始位置');
}
function move(e) {
  let topmo = e.changedTouches[0].clientY
  let leftmo = e.changedTouches[0].clientX
  // console.log(leftmo, '移动中');
  movetop.value = topmo - topst.value
  moveleft.value = leftmo - leftst.value
  console.log(movetop.value, moveleft.value, '移动高度');
  if (movetop.value <= 90 && moveleft.value <= 90) {
    console.log(cjbox.value);
    cjbox.value.style.left = moveleft.value + 'px'
    console.log(cjbox.value.style.left);
    cjbox.value.style.top = `${227 + movetop.value}px`
  }
}
// 确认按钮
function qrcj() {
  let scale = 1
  let canvas = document.createElement('canvas')
  // canvas画布大小宽度设置
  canvas.width = cjbox.value.style.width * scale
  // canvas画布大小宽度设置
  canvas.height = cjbox.value.style.Height * scale
  console.log(cjbox.value.style.width);
  // canvas.getContext('2d').drawImage(cjbox.value, 0, 0, canvas.width, canvas.height)
  // imagecj.value = false
  // imageDOM.value.src = canvas.toDataURL('image/png')
  // console.log(canvas.toDataURL('image/png'));
}
function qxcj() {
  imagecj.value = false
}
</script>

<style lang="scss" scoped>
.profilemy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  transform: translateX(100%);
  transition: all 1s;
  /* 设置初始透明度 */
  background-color: rgba(0, 0, 0, 1);
  /* 最后一位数字表示透明度，取值范围为0~1，其中0为完全透明，1为不透明 */

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    0% {
      background-color: rgba(0, 0, 0, 0.1);
    }

    /* 开始时透明度为0 */
    100% {
      background-color: rgba(0, 0, 0, 1);
    }

    /* 结束时透明度为1 */
  }

  animation: fadeIn 1s ease;
  /* 持续3秒，ease为默认的动画速度曲线 */
}

.imagecj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;

  img {
    width: 390px;
    height: 390px;
    margin-top: 227px;
  }

  .tzbox {
    position: absolute;
    left: 0px;
    top: 227px;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.7);
  }

  button {
    position: absolute;
    left: 0;
    top: 200px;
    width: 60px;
    height: 30px;
    background-color: #000;
    color: #fff;
  }

  .btn2 {
    left: 70px;
  }
}

.top {
  width: 100%;
  height: 44px;
  background: #161622;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 44px;

  span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    margin-left: 10px;
  }
}

.toxiang {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 20px;
  }

  p {
    font-size: 12px;
    color: #8b8c96;
    margin-top: 20px;
  }
}

#mySelect {
  width: 36px;
  height: 44px;
  background-color: #000;
  color: #fff;
}

.box {
  padding-top: 50px;

  .test {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    width: 90%;
    padding: 0 5%;
    color: #fff;
    font-size: 16px;
    line-height: 64px;
  }

  input {
    width: 182px;
    height: 44px;
    background-color: #000;
    border: 0;
    font-size: 16px;
    color: #fff;
    line-height: 44px;
    text-align: right;
    caret-color: #fff;

    &::placeholder {
      color: #fff;
      line-height: 44px;
      text-align: right;
    }
  }
}
</style>